<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>预览</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <style>
        :root{
            --primary:{{PRIMARY}};
        --secondary:{{SECONDARY}};
        --radius:{{RADIUS}};
        --shadow:{{SHADOW}};
        }
        *{box-sizing:border-box;margin:0;padding:0;}
        body{
            font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei",sans-serif;
            background:#f7f9fc;
            color:#333;
            line-height:1.6;
        }
        .hero{
            height:100vh;
            background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)) center/cover;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            text-align:center;
            color:#fff;
            padding:0 20px;
        }
        .hero h1{font-size:clamp(2.5rem, 8vw, 4rem);font-weight:700;letter-spacing:2px;animation:fadeInDown 1s both;}
        .hero p{font-size:clamp(1rem, 4vw, 1.3rem);margin:15px 0 25px;animation:fadeInUp 1s .3s both;}
        .scroll-tip{position:absolute;bottom:25px;animation:bounce 2s infinite;}
        section{padding:60px 20px;max-width:900px;margin:0 auto;}
        .title{text-align:center;font-size:2rem;margin-bottom:40px;background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
        .card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:40px;display:flex;flex-direction:column;}
        .card img,.card video{width:100%;display:block;}
        .txt{padding:25px;}
        .txt h3{font-size:1.4rem;margin-bottom:10px;}
        .txt p{color:#666;}
        .swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
        .swipe img,.swipe video{flex:none;width:85%;scroll-snap-align:center;margin-right:10px;border-radius:4px;}
        @media(min-width:600px){
            .card{flex-direction:row;}
            .card img,.card video{width:50%;height:auto;}
            .txt{width:50%;display:flex;flex-direction:column;justify-content:center;}
            .swipe img,.swipe video{width:40%;}
        }
        @keyframes fadeInDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}
        @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
        @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
    </style>
</head>

<body>
<!-- 首屏 -->
<div class="hero" id="hero">
    <h1 id="heroTitle"></h1>
    <p id="heroSub"></p>
    <div class="scroll-tip">↓</div>
</div>

<!-- 模块容器 -->
<section id="content"></section>

<script>
    /* ===== 0. 后端把 config.json 整串 stringify 后赋给 window.CONFIG ===== */
    window.CONFIG = {
        "hero": {
            "bg": "https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1350&q=80 ",
            "title": "下一站，西藏",
            "subtitle": "在世界屋脊，把心跳交给风"
        },
        "theme": {
            "primary": "#ff7e5f",
            "secondary": "#feb47b",
            "radius": "12px",
            "shadow": "0 8px 20px rgba(0,0,0,.08)"
        },
        "modules": [
            {
                "type": "text",
                "text": "清晨的第一缕阳光洒在洱海，水面像一面镜子，把天空完整地复制了一份。"
            },
            {
                "type": "image",
                "list": [
                    "https://images.unsplash.com/photo-1589308078059-be1415eab4c3?auto=format&fit=crop&w=800&q=80 ",
                    "https://images.unsplash.com/photo-1596402184320-417e7178b2cd?auto=format&fit=crop&w=800&q=80 "
                ]
            },
            {
                "type": "video",
                "list": [
                    "http://localhost:8085/upload/958679d9-9e4a-451f-b544-34ac8e6ceb30.mp4",
                    "https://www.w3schools.com/html/movie.mp4 "
                ]
            },
            {
                "type": "text",
                "text": "旅途没有终点，每一步都是新的开始。愿你永远热泪盈眶，永远相信远方。"
            }
        ]
    }
    /* ===== 1. 渲染首屏 ===== */
    const h = window.CONFIG.hero;
    document.getElementById('heroTitle').textContent = h.title;
    document.getElementById('heroSub').textContent = h.subtitle;
    document.querySelector('.hero').style.backgroundImage = `linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)), url(${h.bg})`;

    /* ===== 2. 渲染模块 ===== */
    const box = document.getElementById('content');
    (window.CONFIG.modules || []).forEach((m, idx) => {
        const card = document.createElement('div');
        card.className = 'card';
        card.style.animation = `fadeInUp .6s ${idx * .1}s both`;

        if (m.type === 'text') {
            const txt = document.createElement('div');
            txt.className = 'txt';
            txt.innerHTML = `<h3>旅途札记</h3><p>${m.text}</p>`;
            card.appendChild(txt);
        }

        if (m.type === 'image') {
            const urls = Array.isArray(m.list) ? m.list : [m.list];
            if (urls.length === 1) {
                const img = document.createElement('img');
                img.src = urls[0];
                card.appendChild(img);
            } else {
                const swipe = document.createElement('div');
                swipe.className = 'swipe';
                urls.forEach(u => {
                    const img = document.createElement('img');
                    img.src = u;
                    swipe.appendChild(img);
                });
                card.appendChild(swipe);
            }
            const txt = document.createElement('div');
            txt.className = 'txt';
            txt.innerHTML = '<h3>精美图集</h3><p>滑动查看更多</p>';
            card.appendChild(txt);
        }

        if (m.type === 'video') {
            const urls = Array.isArray(m.list) ? m.list : [m.list];
            if (urls.length === 1) {
                const v = document.createElement('video');
                v.src = urls[0];
                v.controls = true;
                v.muted = true;
                card.appendChild(v);
            } else {
                const swipe = document.createElement('div');
                swipe.className = 'swipe';
                urls.forEach(u => {
                    const v = document.createElement('video');
                    v.src = u;
                    v.controls = true;
                    v.muted = true;
                    swipe.appendChild(v);
                });
                card.appendChild(swipe);
            }
            const txt = document.createElement('div');
            txt.className = 'txt';
            txt.innerHTML = '<h3>精彩视频</h3><p>左右滑动切换</p>';
            card.appendChild(txt);
        }

        box.appendChild(card);
    });
</script>
</body>
</html>